<gm:page title="Jollidays" authenticate="false">

  <style type="text/css">
    body {
      margin: 0px;
      padding: 0px;
    }
    a:link, a:visited {
      color: blue;
    }
    .gm-section {
      border: solid #c3d9ff 2px;
      padding: 0px;
    }
    .gm-section-container {
      padding: 0px;
    }
    .gm-section-tabs {
      padding-left: 0px;
      padding-right: 0px;
    }
  </style>
    
  <script>
    function changeRecipesList(select) {
      var recipesList = google.mashups.getObjectById('recipesList');
      var selectedValue = select.value;
    
      recipesList.setData('http://base.google.com/base/feeds/snippets/-/Recipes?q='+escape(selectedValue));
      recipesList.setPage(0);
    }
    function searchRecipes(form) {
      if (form.recipesSearchField.value != '') {
        var newOption = document.createElement('option');
        newOption.innerHTML = form.recipesSearchField.value;
        newOption.value = form.recipesSearchField.value;

        form.recipesSelect.appendChild(newOption);
        form.recipesSelect.selectedIndex = form.recipesSelect.options.length-1;
        changeRecipesList(form.recipesSelect);
        form.recipesSearchField.value = '';
      }
    }
  </script>
  
  <div align="center">
    <div style="width:600px">
      <img src="resources/jollidays.png" style="height:339px; width:600px"/>
    </div>
    <div style="width:600px" align="left">
      <div align="right">
        <gm:tabs target="myContainer"/>
      </div>
      <gm:container id="myContainer">
        <gm:section id="section1" title="Revelry">
          <div style="width:100%">
            <!--<div style="float:left; width:240px">
              <gm:calendar id="revelryCalendar" data="${revelryList}" ref="g:event_date_range">
                <gm:handleEvent event="select" src="revelryList"/>
                <gm:handleEvent event="select" src="revelryMap"/>
              </gm:calendar>
            </div>
            <div style="float:right; width:345px">
              <gm:map id="revelryMap" data="${revelryList}" geolocationref="g:location" zoom="3" style="border:solid gray 1px" infotemplate="revelryMapInfoTemplate">
                <gm:handleEvent event="select" src="revelryCalendar"/>
                <gm:handleEvent event="select" src="revelryList"/>
              </gm:map>
            </div>
            <br style="clear:left"/>-->
            <div style="float:left; width:231px">
              <gm:list id="revelryList" data="http://base.google.com/base/feeds/snippets/-/Events%20and%20Activities?q=holiday" pagesize="6" template="revelryListTemplate">
                <gm:handleEvent event="select" src="revelryCalendar"/>
                <gm:handleEvent event="select" src="revelryMap"/>
              </gm:list>
            </div>
            <br style="clear:both"/>
          </div>
          <h1>Test</h1>
        </gm:section>
        <gm:section id="section2" title="Recipes">
          <form id="recipesForm">
            <select name="recipesSelect" onchange="changeRecipesList(this)">
              <option value="Turkey">Turkey</option>
              <option value="Stuffing">Stuffing</option>
              <option value="Green Beans">Green Beans</option>
              <option value="Mashed Potatoes">Mashed Potatoes</option>
              <option value="Gingerbread">Gingerbread</option>
              <option value="Pecan Pie">Pecan Pie</option>
            </select>
            or
            <input name="recipesSearchField" type="text"/>
            <input type="button" value="Search" onclick="searchRecipes(this.form)"/>
          </form>
          <gm:list id="recipesList" data="http://base.google.com/base/feeds/snippets/-/Recipes?q=Turkey" selection="false" pagesize="5" template="recipesListTemplate"/>
        </gm:section>
        <gm:section id="section3" title="Reading">
          <div align="center">
            From <a href="http://www.holidayblog.ca/"><b>Holidayblog.ca</b></a>
          </div>
          <gm:list id="readingList" data="http://www.holidayblog.ca/atom.xml" selection="false" pagesize="5" template="readingListTemplate"/>
        </gm:section>
      </gm:container>
    </div>
  </div>
  
  <gm:template id="revelryListTemplate">
    <table class="blue-theme" style="width:100%" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>Upcoming events</th>
        </tr>
      </thead>
      <tr repeat="true">
        <td><gm:html ref="atom:title"/></td>
      </tr>
      <tfoot>
        <tr>
          <td align="center"><gm:pager compact="true"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
  
  <gm:template id="revelryMapInfoTemplate">
    <div style="text-align:left; width:250px">
      <span style="font-size:13pt; font-weight:bold"><gm:html ref="atom:title"/></span>
      <p>
        <gm:text ref="g:location"/>
        <br/>
        <span style="font-style:italic"><gm:date ref="g:event_date_range" time="true"/></span>
      </p>
      <p>
        <gm:html ref="atom:content"/>
        <br/>
        <gm:link ref="atom:link/@href" label="More..."/>
      </p>
    </div>
  </gm:template>
  
  <gm:template id="recipesListTemplate">
    <table class="blue-theme" style="margin-top:10px; width:100%" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th style="width:20px"><span style="visibility:hidden">.</span></th>
          <th>Recipes</th>
          <th style="width:32px"><span style="visibility:hidden">.</span></th>
        </tr>
      </thead>
      <tbody repeat="true">
        <tr>
          <td><gm:toggle/></td>
          <td>
            <b><gm:html ref="atom:title"/></b>
            <br/>
            <gm:html ref="atom:content"/>
          </td>
          <td><gm:link ref="atom:link/@href" label="More"/></td>
        </tr>
        <tr class="gm-toggled">
          <td colspan="3">
            <i>Wine:</i>
            <br/>
            <gm:text ref="g:wine_recommendation"/>
          </td>
        </tr>
        <tr class="gm-toggled">
          <td colspan="3">
            <gm:image ref="g:image_link"/>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="center"><gm:pager/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
  
  <gm:template id="readingListTemplate">
    <table class="blue-theme" style="margin-top:10px; width:100%" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>Posts</th>
        </tr>
      </thead>
      <tbody repeat="true">
        <tr>
          <td>
            <b><gm:html ref="atom:title"/></b>
            <p>
              <gm:html ref="atom:content"/>
            </p>
            <br/>
            <gm:link ref="atom:link/@href" label="More..."/>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td align="center"><gm:pager/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>

</gm:page>








